import React, { useState, useEffect, useCallback } from 'react';
import {
    TemporaryVehiclesListAll
} from './style';
import {
    postLsCarWhiteFindLsCarWhite,
    getLsCarWhiteDeleteLsCarWhite,
    getLsCarWhiteAccreditIn,
    getLsCarWhiteAccreditOut
} from '../../api'
import SelectModules from './Components/SelectModules';
import AddVehicleModule from './Components/AddVehicleModule';
import { message, PageHeader, Table, Button, Space, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

/**
 * @description: 临时车辆列表 - 添加 - 编辑
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-09-05） 创建
 */

const TemporaryVehiclesList = () => {
    const [selectData, setSelectData] = useState({});
    const [listData, setListData] = useState([]);
    const [pagingData, setPagingData] = useState({
        currentPage: 1,
        size: 10,
        total: 0
    });
    const [addVehicleModuleShow, setAddVehicleModuleShow] = useState(false);
    const [clickId, setClickId] = useState(undefined);
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10,
        }) => {
            parames.state = 2;
            ; (async () => {
                const { code, msg, data } = await postLsCarWhiteFindLsCarWhite(parames);
                if (code === '20000') {
                    setListData(data.records);
                    setPagingData({
                        currentPage: parames.currentPage,
                        size: parames.size,
                        total: data.total
                    });
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    );
    useEffect(() => {
        listFun();
    }, [listFun]);
    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${pagingData.total}条`,
        //每页条数
        pageSize: pagingData.size,
        //当前页数
        current: pagingData.currentPage,
        //数据总数
        total: pagingData.total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const parames = {
            currentPage: current,
            size: pageSizeFun,
            ...selectData
        }
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const parames = {
            currentPage: current,
            size: pagingData.size,
            ...selectData
        }
        listFun(parames);
    }
    //添加内部车辆
    const handleAddVehicle = () => {
        setAddVehicleModuleShow(true)
    }
    //编辑
    const handleChangeVehicle = id => {
        setClickId(id)
        setAddVehicleModuleShow(true)
    }
    //删除白名单
    const handleDelete = id => {
        confirm({
            title: '确定要删除当前信息吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                ; (async () => {
                    const { code, msg } = await getLsCarWhiteDeleteLsCarWhite({ id })
                    if (code === '20000') {
                        message.success('删除成功！')
                        const parames = {
                            currentPage: pagingData.currentPage,
                            size: pagingData.size,
                            ...selectData
                        }
                        listFun(parames);
                    } else {
                        message.error(msg)
                    }
                })()
            }
        });
    }
    //进出权限
    const handleLimitsOfAuthority = (type, id) => {
        confirm({
            title: `确定要给该车辆${type === 'in' ? '驶入' : '驶出'}权限吗？`,
            icon: <ExclamationCircleOutlined />,
            onOk() {
                if (type === 'in') {
                    ; (async () => {
                        const { code, msg } = await getLsCarWhiteAccreditIn({ id });
                        if (code === '20000') {
                            message.success('驶入权限添加成功！');
                            const parames = {
                                currentPage: pagingData.currentPage,
                                size: pagingData.size,
                                ...selectData
                            }
                            listFun(parames);
                        } else {
                            message.error(msg)
                        }
                    })();
                } else if (type === 'out') {
                    ; (async () => {
                        const { code, msg } = await getLsCarWhiteAccreditOut({ id });
                        if (code === '20000') {
                            message.success('驶出权限添加成功！');
                            const parames = {
                                currentPage: pagingData.currentPage,
                                size: pagingData.size,
                                ...selectData
                            }
                            listFun(parames);
                        } else {
                            message.error(msg)
                        }
                    })();
                }
            }
        });
    }
    const columns = [
        {
            title: '序号',
            render: (text, recode, index) => <span>{index + 1}</span>
        },
        {
            title: '车主姓名',
            dataIndex: 'carMaster'
        },
        {
            title: '车牌号',
            dataIndex: 'carNo'
        },
        {
            title: '车主电话',
            dataIndex: 'mobile'
        },
        {
            title: '进授权',
            dataIndex: 'bolAuthIn'
        },
        {
            title: '出授权',
            dataIndex: 'bolAuthOut'
        },
        {
            title: '操作',
            render: (text, recode) => <Space>
                <Button type='primary' onClick={() => handleChangeVehicle(recode.id)}>编辑</Button>
                <Button type='primary' onClick={() => handleLimitsOfAuthority('in', recode.id)}>进授权</Button>
                <Button type='primary' onClick={() => handleLimitsOfAuthority('out', recode.id)}>出授权</Button>
                <Button
                    type='primary'
                    danger
                    onClick={() => handleDelete(recode.id)}
                >删除</Button>
            </Space>
        },
    ];
    return <TemporaryVehiclesListAll>
        <PageHeader
            className="site-page-header"
            title="临时车辆"
            extra={[
                <Button key="1" type='primary' onClick={() => handleAddVehicle()}>添加临时车辆</Button>
            ]}
        />
        <SelectModules setSelectData={setSelectData} listFun={listFun} />
        <Table dataSource={listData} columns={columns} pagination={pagination} rowKey='id' />
        {/* 弹框 */}
        <AddVehicleModule
            addVehicleModuleShow={addVehicleModuleShow}
            setAddVehicleModuleShow={setAddVehicleModuleShow}
            clickId={clickId}
            setClickId={setClickId}
            listFun={listFun}
        />
    </TemporaryVehiclesListAll>
}

export default TemporaryVehiclesList;